<template>
  <div class="search">
    <Header></Header>
    <el-row justify="center">
      <el-col :span="20">
        <!--        头部-->
        <div style="display: flex;justify-content: center;align-items: center;">
          <h3>搜索：{{ searchContent }}</h3>
        </div>
        <div style="background: #f5f5f5;padding-top: 25px">
          <el-row justify="center" style="padding-bottom: 95px">
            <el-col :xl="18" :lg="24">
              <div style="width: 100%;display: flex;justify-content: center">
                <el-col :span="18" style="width: 100%;background: #fff;border-radius: 10px">
                  <!--                    每个文章-->
                  <template v-for="item in ArticleList" :key="item.id">
                    <div style="width: 98%;height: 166px;margin: 25px 10px">
                      <el-card
                          shadow="hover"
                          style="height: 100%;position: relative;"
                      >
                        <!--                          标题-->
                        <div @click="toArticleBtn(item.id)" style="cursor: pointer">
                          <span style="font-weight: 900">{{ item.title }}</span>
                        </div>
                        <!--                          简单标签-->
                        <div
                            style="display: flex;
                              color: #c5c5c5;
                              margin-left: 10px;
                              align-items: center;
                              margin-top: 5px;
                              cursor: pointer
">
                            <span style="display: flex;align-items: center">
                              <el-icon style="margin-right: 5px"><avatar/></el-icon>
                              {{ item.sort }}
                            </span>
                          <span style="display: flex;align-items: center;margin-left: 10px">
                              <el-icon style="margin-right: 5px"><position/></el-icon>
                              {{ item.author }}
                            </span>
                        </div>
                        <!--                          简介内容-->
                        <div style="margin-top: 10px">
                          <div>{{ item.content }}</div>
                        </div>
                        <div>
                          <el-button
                              round
                              color="#448aff"
                              style="position: absolute;
                                bottom: 10px;
                                color: white;
                                right: 15px"
                              size="small"
                              @click="toArticleBtn(item.id)"
                          >阅读更多
                          </el-button>
                        </div>
                      </el-card>
                    </div>
                  </template>
                  <!--              分页-->
<!--                  <div style="float: right;padding-bottom: 20px;margin-right: 5px">-->
<!--                    <el-pagination background-->
<!--                                   hide-on-single-page-->
<!--                                   layout="prev, pager, next" :total="articleTotal">-->
<!--                    </el-pagination>-->
<!--                  </div>-->
                </el-col>
              </div>
            </el-col>
            <!--        <el-col :span="4" class="hidden-sm-and-down hidden-sm-only hidden-md-only hidden-md-only hidden-lg-only">-->
            <!--          <div-->
            <!--              style="height: 250px;-->
            <!--                    width: 250px;-->
            <!--                    border: 1px solid red;-->
            <!--                    display: flex;-->
            <!--                    justify-content: center;-->
            <!--                    align-items: center;-->
            <!--                    margin-top: 20px;-->
            <!--"-->
            <!--          >-->
            <!--            个人介绍-->

            <!--          </div>-->
            <!--        </el-col>-->
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import SearchCon from "./SearchCon.js";
import Header from "../../components/Header.vue";
import {Avatar,Position} from "@element-plus/icons";

export default {
  name: "SearchCon",
  components: {
    Header,
    Avatar,
    Position
  },
  setup() {
    return {
      ...SearchCon()
    }
  }
}
</script>

<style scoped>
.search {
  height: 100%;
  width: 100%;
}
</style>